.sv-tn-navbar {
  @include useTheme {
    .tn-navbar {
      --tn-text-color-primary: #{getTheme('sv-text-color')};
      .tn-navbar__bg {
        background-color: getTheme('sv-navbar-bg-color') !important;
      }
    }
  }
}

.sv-tn-tabbar {
  @include useTheme {
    .tn-tabbar {
      --tn-color-gray: #{getTheme('sv-info-color')};
      --tn-color-primary: #{getTheme('sv-primary-color')};

      .tn-tabbar__bg,
      .tn-tabbar__bulge {
        background-color: getTheme('sv-tabbar-bg-color') !important;
      }

      .tn-tabbar__content {
        .tn-tabbar-item {
          color: getTheme('sv-info-color') !important;
        }
        .is-active {
          color: getTheme('sv-primary-color') !important;
        }
      }
    }
  }
}

.sv-tn-search-box {
  @include useTheme {
    --tn-color-gray: #{getTheme('sv-border-color')};
    --tn-text-color-primary: #{getTheme('sv-text-color')};
  }
}
